var module=angular.module('banner', []);

module.component('banner', {
    template: `
    <div class="banner">
        <ul></ul>
        <ol></ol>
        <i class="left"></i><i class="right"></i>
    </div>
    `,
    controller: function () {
        var images_url = [
            Browser.basePath()+'base/images/768_1366/ad/ad1.jpg',
            Browser.basePath()+'base/images/768_1366/ad/ad2.jpg'
        ];

        var images_count = images_url.length;
        for (var j = 0; j < images_count + 1; j++) {
            $('.banner ul').append('<li></li>');
        }

        for (var k = 0; k < images_count; k++) {
            if (k == 0) {
                $('.banner ol').append('<li class="current"></li>');
            } else {
                $('.banner ol').append('<li></li>');
            }
        }

        img = '<img src="' + images_url[0] + '"/>';
        $('.banner ul li').html(img);
        $.each(images_url, function(key, value) {
            $('.banner ul li').eq(key).html('<img src="' + value + '"/>');
        });

        $('.banner').css('height', 340);

        $('.banner ul').css('width', (images_count + 1) * 100 + '%');

        $('.banner ol').css('width', images_count * 20 + 'px');
        $('.banner ol').css('margin-left', -images_count * 20 * 0.5 + 'px');

        var num = 0;
        // var window_width = $(window).width();
        $(window).resize(function() {
            // window_width = $(window).width();
            $('.banner ul li').css({
                width: 768
            });
            clearInterval(timer);
            nextPlay();
            timer = setInterval(nextPlay, 5000);
        });
        //console.log(628);
        $('.banner ul li').width(768);
        //轮播圆点
        $('.banner ol li').mouseover(function() { //用hover的话会有两个事件(鼠标进入和离开)
            $(this).addClass('current').siblings().removeClass('current');
            //第一张图： 0 * 628
            //第二张图： 1 * 628
            //第三张图： 2 * 628
            //获取当前编号
            var i = $(this).index();
            //console.log(i);
            $('.banner ul').stop().animate({
                left: -i * 768
            }, 500);
            num = i;
        });
        //自动播放
        var timer = null;

        function prevPlay() {
            num--;
            if (num < 0) {
                //悄悄把图片跳到最后一张图(复制页,与第一张图相同),然后做出图片播放动画，left参数是定位而不是移动的长度
                $('.banner ul').css({
                    left: -768 * images_count
                }).stop().animate({
                    left: -768 * (images_count - 1)
                }, 500);
                num = images_count - 1;
            } else {
                //console.log(num);
                $('.banner ul').stop().animate({
                    left: -num * 768
                }, 500);
            }
            if (num == images_count - 1) {
                $('.banner ol li').eq(images_count - 1).addClass('current').siblings().removeClass('current');
            } else {
                $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');

            }
        }

        function nextPlay() {
            num++;
            if (num > images_count) {
                //播放到最后一张(复制页)后,悄悄地把图片跳到第一张,因为和第一张相同,所以难以发觉,
                $('.banner ul').css({
                    left: 0
                }).stop().animate({
                    left: -768
                }, 500);
                //css({left:0})是直接悄悄改变位置，animate({left:-628},500)是做出移动动画
                //随后要把指针指向第二张图片,表示已经播放至第二张了。
                num = 1;
            } else {
                //在最后面加入一张和第一张相同的图片，如果播放到最后一张，继续往下播，悄悄回到第一张(肉眼看不见)，从第一张播放到第二张
                //console.log(num);
                $('.banner ul').stop().animate({
                    left: -num * 768
                }, 500);
            }
            if (num == images_count) {
                $('.banner ol li').eq(0).addClass('current').siblings().removeClass('current');
            } else {
                $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');

            }
        }
        timer = setInterval(nextPlay, 5000);
        //鼠标经过banner，停止定时器,离开则继续播放
        $('.banner').mouseenter(function() {
            clearInterval(timer);
            //左右箭头显示(淡入)
            $('.banner i').fadeIn();
        }).mouseleave(function() {
            timer = setInterval(nextPlay, 5000);
            //左右箭头隐藏(淡出)
            $('.banner i').fadeOut();
        });
        //播放下一张
        $('.banner .right').click(function() {
            nextPlay();
        });
        //返回上一张
        $('.banner .left').click(function() {
            prevPlay();
        });
    }
});